<template>
	<scroll-view class="album_scroll_view" scroll-y @scrolltolower="handleToLower">
		
		<!-- 轮播图 -->
		<view class="swiper_album">
			<swiper autoplay indicator-dots circular>
				<swiper-item
				v-for="item in banner"
				:key="item.id">
				
					<image :src="item.thumb"></image>
					
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 列表页 -->
		<view class="list_album">
			<navigator :url=" `/pages/album/index?id=${item.id}` " class="album_item"
			v-for="item in album"
			:key="item.id"
			>
				<view class="item_img"><image mode="aspectFill" :src="item.cover"></image></view>
				<view class="item_info">
					<view class="info_name">{{item.name}}</view>
					<view class="info_desc">{{item.desc}}</view>
					<view class="info_btn">
						<view class="attention">+关注</view>
					</view>
				</view>
			</navigator>
		</view>
		
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图
				banner:[],
				// 列表数组
				album:[],
				// 请求数据
				params:{
					limit:10,
					order:"new",
					skip:0
				},
				//是否还有数据
				hasMore:true
			}
		},
		mounted() {
			this.getAllList()
		},
		methods: {
			// 获取所有参数
			async getAllList() {
				let { banner , album } = await this.$request({
					url: "/image/v1/wallpaper/album",
					data: this.params
				})
				//不用每次懒加载都重新赋值轮播图
				if(this.banner.length == 0){ this.banner = [...this.banner,...banner] }
				//请求过来没数据了就改key
				if(album.length == 0){ this.hasMore = false }
				this.album = [...this.album,...album]
				// console.log(this.banner)
				console.log(this.album)
			},
			//上拉触底
			handleToLower(){
				if(this.hasMore){
					this.params.skip += this.params.limit
					this.getAllList()
				}else{
					uni.showToast({title:"无更多内容",icon:"none"})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.album_scroll_view{
		height: calc(100vh - 36px);
	}
	
	.swiper_album{
		swiper{
			height: calc(750rpx / 342rpx / 214rpx);
			image{
				height: 100%;
			}
		}
	}
	
	.list_album{
		padding: 10rpx;
		.album_item{
			padding: 10rpx;
			display: flex;
			border-bottom: 1rpx solid #ccc;
			.item_img{
				flex: 1;
				font-size: 0;
				padding: 10rpx;
				image{
					width: 220rpx;
					height: 220rpx;
				}
			}
			.item_info{
				flex: 2;
				padding: 0 10rpx;
				.info_name{
					font-size: 30rpx;
					color: #000;
					padding: 10rpx 0;
				}
				.info_desc{
					margin: 10rpx 0;
					font-size: 24rpx;
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.info_btn{
					padding: 10rpx;
					display: flex;
					justify-content: flex-end;
					.attention{
						color: $color;
						border: 1rpx solid $color;
						padding: 10rpx;
					}
				}
			}
		}
	}
</style>
